<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>RS-1200 Prototype 45 | Elements | Lists</title>
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../layout/styles/main.css" rel="stylesheet" type="text/css" media="all">
<link href="../layout/styles/mediaqueries.css" rel="stylesheet" type="text/css" media="all">
<!--[if lt IE 9]>
<link href="../layout/styles/ie/ie8.css" rel="stylesheet" type="text/css" media="all">
<script src="../layout/scripts/ie/css3-mediaqueries.min.js"></script>
<script src="../layout/scripts/ie/html5shiv.min.js"></script>
<![endif]-->
</head>
<body class="">
<div class="wrapper row1">
  <header id="header" class="full_width clear">
    <hgroup>
      <h1><a href="../index.html">RS-1200 Prototype 45</a></h1>
      <h2>Free Responsive Template</h2>
    </hgroup>
    <div id="header-contact">
      <ul class="list none">
        <li><span class="icon-envelope"></span> <a href="#">info@domain.com</a></li>
        <li><span class="icon-phone"></span> +xx xxx xxxxxxxxxx</li>
      </ul>
    </div>
  </header>
</div>
<!-- ################################################################################################ -->
<div class="wrapper row2">
  <nav id="topnav">
    <ul class="clear">
      <li><a href="../index.html" title="Homepage">Homepage</a></li>
      <li><a class="drop" href="#" title="Pages">Pages</a>
        <ul>
          <li><a href="../pages/full-width-content.html" title="Full Width Content">Full Width Content</a></li>
          <li><a href="../pages/content-leftsidebar.html" title="Content + Left Sidebar">Content + Left Sidebar</a></li>
          <li><a href="../pages/content-rightsidebar.html" title="Content + Right Sidebar">Content + Right Sidebar</a></li>
          <li><a href="../pages/content-bothsidebars.html" title="Content + Both Sidebars">Content + Both Sidebars</a></li>
          <li><a href="../pages/contact.html" title="Contact">Contact</a></li>
          <li><a href="../pages/404.html" title="404">404</a></li>
          <li><a href="../pages/testimonials.html" title="Testimonials">Testimonials</a></li>
          <li><a href="../pages/about-us.html" title="About Us">About Us</a></li>
          <li><a href="../pages/team-member.html" title="Team Member">Team Member</a></li>
          <li class="last-child"><a href="../pages/faq.html" title="FAQ">FAQ</a></li>
        </ul>
      </li>
      <li class="active"><a class="drop" href="#" title="Elements">Elements</a>
        <ul>
          <li><a href="buttons.html" title="Buttons">Buttons</a></li>
          <li><a href="alert-messages.html" title="Alert Messages">Alert Messages</a></li>
          <li><a href="font-icons.html" title="Font Icons">Font Icons</a></li>
          <li><a href="call-to-action.html" title="Call To Action">Call To Action</a></li>
          <li><a href="columns.html" title="Columns">Columns</a></li>
          <li><a href="columns-no-gutter.html" title="Columns - No Gutter">Columns - No Gutter</a></li>
          <li class="active"><a href="lists.html" title="Lists">Lists</a></li>
          <li><a href="accordions.html" title="Accordions">Accordions</a></li>
          <li><a href="tabs.html" title="Tabs">Tabs</a></li>
          <li><a href="toggles.html" title="Toggles">Toggles</a></li>
          <li class="last-child"><a href="pricing-tables.html" title="Pricing Tables">Pricing Tables</a></li>
        </ul>
      </li>
      <li><a class="drop" href="#" title="Portfolio Layouts">Portfolio Layouts</a>
        <ul>
          <li><a href="../portfolio-layouts/portfolio-overview-full-width-content.html" title="Full Width Portfolio">Full Width Portfolio</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-2columns.html" title="2 Column Grid">2 Column Grid</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-2columns-leftsidebar.html" title="2 Column Grid + Left Sidebar">2 Col. Grid + Left Sidebar</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-2columns-rightsidebar.html" title="2 Column Grid + Right Sidebar">2 Col. Grid + Right Sidebar</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-2columns-bothsidebars.html" title="2 Column Grid + Both Sidebars">2 Col. Grid + Both Sidebars</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-3columns.html" title="3 Column Grid">3 Column Grid</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-3columns-leftsidebar.html" title="3 Column Grid + Left Sidebar">3 Col. Grid + Left Sidebar</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-3columns-rightsidebar.html" title="3 Column Grid + Right Sidebar">3 Col. Grid + Right Sidebar</a></li>
          <li><a href="../portfolio-layouts/portfolio-overview-3columns-bothsidebars.html" title="3 Column Grid + Both Sidebars">3 Col. Grid + Both Sidebars</a></li>
          <li class="last-child"><a href="../portfolio-layouts/portfolio-overview-4columns.html" title="4 Column Grid">4 Column Grid</a></li>
        </ul>
      </li>
      <li><a class="drop" href="#" title="Gallery Layouts">Gallery Layouts</a>
        <ul>
          <li><a href="../gallery-layouts/gallery-full-width-content.html" title="Full Width Gallery">Full Width Gallery</a></li>
          <li><a href="../gallery-layouts/gallery-2columns.html" title="2 Column Grid">2 Column Grid</a></li>
          <li><a href="../gallery-layouts/gallery-2columns-leftsidebar.html" title="2 Column Grid + Left Sidebar">2 Col. Grid + Left Sidebar</a></li>
          <li><a href="../gallery-layouts/gallery-2columns-rightsidebar.html" title="2 Column Grid + Right Sidebar">2 Col. Grid + Right Sidebar</a></li>
          <li><a href="../gallery-layouts/gallery-2columns-bothsidebars.html" title="2 Column Grid + Both Sidebars">2 Col. Grid + Both Sidebars</a></li>
          <li><a href="../gallery-layouts/gallery-3columns.html" title="3 Column Grid">3 Column Grid</a></li>
          <li><a href="../gallery-layouts/gallery-3columns-leftsidebar.html" title="3 Column Grid + Left Sidebar">3 Col. Grid + Left Sidebar</a></li>
          <li><a href="../gallery-layouts/gallery-3columns-rightsidebar.html" title="3 Column Grid + Right Sidebar">3 Col. Grid + Right Sidebar</a></li>
          <li><a href="../gallery-layouts/gallery-3columns-bothsidebars.html" title="3 Column Grid + Both Sidebars">3 Col. Grid + Both Sidebars</a></li>
          <li><a href="../gallery-layouts/gallery-4columns.html" title="4 Column Grid">4 Column Grid</a></li>
          <li class="last-child"><a href="../gallery-layouts/gallery-5columns.html" title="5 Column Grid">5 Column Grid</a></li>
        </ul>
      </li>
      <li><a href="#" title="Link Text">Link Text</a></li>
      <li class="last-child"><a href="#" title="A Very Long Link Text">A Very Long Link Text</a></li>
    </ul>
  </nav>
</div>
<!-- content -->
<div class="wrapper row3">
  <div id="container">
    <!-- ################################################################################################ -->
    <ul class="nospace clear">
      <!-- ############################################################################## -->
      <li class="one_quarter first push30">
        <h2>Default List</h2>
        <ul class="list indent disc">
          <li>Nullam congue odio</li>
          <li>Quisque faucibus cursus</li>
          <li>Integer eget nisi dolor</li>
          <li>Sed consectetur neque</li>
        </ul>
        <code class="code">&lt;ul class=&quot;list indent disc&quot;&gt;</code>
        <!-- -->
      </li>
      <li class="one_quarter push30">
        <h2>No Bullets</h2>
        <ul class="list none">
          <li>Nullam congue odio</li>
          <li>Quisque faucibus cursus</li>
          <li>Integer eget nisi dolor</li>
          <li>Sed consectetur neque</li>
        </ul>
        <code class="code">&lt;ul class=&quot;list none&quot;&gt;</code>
        <!-- -->
      </li>
      <li class="one_quarter push30">
        <h2>Roman Numerals</h2>
        <ul class="list roman">
          <li>Nullam congue odio</li>
          <li>Quisque faucibus cursus</li>
          <li>Integer eget nisi dolor</li>
          <li>Sed consectetur neque</li>
        </ul>
        <code class="code">&lt;ul class=&quot;list roman&quot;&gt;</code>
        <!-- -->
      </li>
      <li class="one_quarter push30">
        <h2>Alpha</h2>
        <ul class="list alpha">
          <li>Nullam congue odio</li>
          <li>Quisque faucibus cursus</li>
          <li>Integer eget nisi dolor</li>
          <li>Sed consectetur neque</li>
        </ul>
        <code class="code">&lt;ul class=&quot;list alpha&quot;&gt;</code>
        <!-- -->
      </li>
      <li class="one_quarter first push30">
        <h2>Circle</h2>
        <ul class="list circle">
          <li>Nullam congue odio</li>
          <li>Quisque faucibus cursus</li>
          <li>Integer eget nisi dolor</li>
          <li>Sed consectetur neque</li>
        </ul>
        <code class="code">&lt;ul class=&quot;list circle&quot;&gt;</code>
        <!-- -->
      </li>
      <li class="one_quarter push30">
        <h2>Decimal</h2>
        <ul class="list decimal">
          <li>Nullam congue odio</li>
          <li>Quisque faucibus cursus</li>
          <li>Integer eget nisi dolor</li>
          <li>Sed consectetur neque</li>
        </ul>
        <code class="code">&lt;ul class=&quot;list decimal&quot;&gt;</code>
        <!-- -->
      </li>
      <li class="one_quarter push30">
        <h2>Image Tick</h2>
        <ul class="list tick">
          <li>Nullam congue odio</li>
          <li>Quisque faucibus cursus</li>
          <li>Integer eget nisi dolor</li>
          <li>Sed consectetur neque</li>
        </ul>
        <code class="code">&lt;ul class=&quot;list tick&quot;&gt;</code>
        <!-- -->
      </li>
      <li class="one_quarter push30">
        <h2>Image Arrow</h2>
        <ul class="list arrow">
          <li>Nullam congue odio</li>
          <li>Quisque faucibus cursus</li>
          <li>Integer eget nisi dolor</li>
          <li>Sed consectetur neque</li>
        </ul>
        <code class="code">&lt;ul class=&quot;list arrow&quot;&gt;</code>
        <!-- -->
      </li>
      <li class="one_quarter first">
        <h2>Underline</h2>
        <ul class="list underline">
          <li>Nullam congue odio</li>
          <li>Quisque faucibus cursus</li>
          <li>Integer eget nisi dolor</li>
          <li>Sed consectetur neque</li>
        </ul>
        <code class="code">&lt;ul class=&quot;list underline&quot;&gt;</code>
        <!-- -->
      </li>
      <li class="one_quarter">
        <h2>TagCloud</h2>
        <ul class="list tagcloud">
          <li><a href="#">sed</a></li>
          <li><a href="#">risus</a></li>
          <li><a href="#">suscipit</a></li>
          <li><a href="#">ultrices</a></li>
          <li><a href="#">urna</a></li>
          <li><a href="#">aliquam</a></li>
          <li><a href="#">sit</a></li>
          <li><a href="#">amet</a></li>
          <li><a href="#">eget</a></li>
          <li><a href="#">erat</a></li>
          <li><a href="#">adipiscing</a></li>
          <li><a href="#">varius</a></li>
          <li><a href="#">vel</a></li>
          <li><a href="#">vitae</a></li>
          <li><a href="#">dolor</a></li>
        </ul>
        <code class="code">&lt;ul class=&quot;list tagcloud&quot;&gt;</code>
        <!-- -->
      </li>
      <li class="one_half">
        <h2>TagCloud + Rounded Corners</h2>
        <ul class="list tagcloud rnd8">
          <li><a href="#">sed</a></li>
          <li><a href="#">risus</a></li>
          <li><a href="#">suscipit</a></li>
          <li><a href="#">ultrices</a></li>
          <li><a href="#">urna</a></li>
          <li><a href="#">aliquam</a></li>
          <li><a href="#">sit</a></li>
          <li><a href="#">amet</a></li>
          <li><a href="#">eget</a></li>
          <li><a href="#">erat</a></li>
          <li><a href="#">adipiscing</a></li>
          <li><a href="#">varius</a></li>
          <li><a href="#">vel</a></li>
          <li><a href="#">vitae</a></li>
          <li><a href="#">dolor</a></li>
        </ul>
        <code class="code">&lt;ul class=&quot;list tagcloud rnd8&quot;&gt;</code>
        <!-- -->
        <p><strong>Note:</strong> You have the choice of 4 default rounded corner sizes - 5, 8, 10 &amp; 12px. To use the individual sizes all you have to do is simply add the number to the end of the class name &quot;rnd&quot; e.g. rnd5, rnd8, rnd10, rnd12.</p>
      </li>
      <!-- ############################################################################## -->
    </ul>
    <!-- ############################################################################## -->
    <div class="divider2"></div>
    <!-- ############################################################################## -->
    <div class="clear">
      <!-- ############################################################################## -->
      <div class="one_third first">
        <ul class="list decimal">
          <li><code>&lt;ul class=&quot;list decimal&quot;&gt;</code></li>
          <li>Quisque faucibus cursus
            <ul class="list alpha">
              <li><code>&lt;ul class=&quot;list alpha&quot;&gt;</code></li>
              <li>Quisque faucibus cursus
                <ul class="list roman">
                  <li><code>&lt;ul class=&quot;list roman&quot;&gt;</code></li>
                  <li>Quisque faucibus cursus</li>
                  <li>Integer eget nisi dolor
                    <ul class="list none">
                      <li><code>&lt;ul class=&quot;list none&quot;&gt;</code></li>
                      <li>Quisque faucibus cursus</li>
                      <li>Integer eget nisi dolor</li>
                      <li>Sed consectetur neque</li>
                    </ul>
                  </li>
                  <li>Sed consectetur neque</li>
                </ul>
              </li>
              <li>Integer eget nisi dolor</li>
              <li>Sed consectetur neque</li>
            </ul>
          </li>
          <li>Integer eget nisi dolor</li>
          <li>Sed consectetur neque</li>
        </ul>
      </div>
      <!-- ############################################################################## -->
      <div class="one_third">
        <h2>Notes:</h2>
        <p>All of the CSS classes that are used for the unordered lists found on this page can also be used for ordered lists and the same result will be achieved.</p>
        <p>The &quot;default list&quot; above (the first list on this page) is our modified version, if you were to add a list without CSS it would look similar to our default version, difference being, our version has more space between the list elements making it look cleaner and the content is easier to read.</p>
        <p>The example to the left simply shows what is possible when using the lists from above, when nested within each other.</p>
        <p>The nested list (right) has its own CSS class &quot;block&quot;, each nested child list has its own left border which helps to associate the list elements with their direct parent.</p>
      </div>
      <!-- ############################################################################## -->
      <div class="one_third">
        <ul class="list block">
          <li>Nullam congue odio</li>
          <li>Quisque faucibus cursus
            <ul>
              <li>Nullam congue odio</li>
              <li>Quisque faucibus cursus
                <ul>
                  <li>Nullam congue odio</li>
                  <li>Quisque faucibus cursus</li>
                  <li>Integer eget nisi dolor
                    <ul>
                      <li>Nullam congue odio</li>
                      <li>Quisque faucibus cursus</li>
                      <li>Integer eget nisi dolor</li>
                      <li>Sed consectetur neque</li>
                    </ul>
                  </li>
                  <li>Sed consectetur neque</li>
                </ul>
              </li>
              <li>Integer eget nisi dolor</li>
              <li>Sed consectetur neque</li>
            </ul>
          </li>
          <li>Integer eget nisi dolor</li>
          <li><code class="code">&lt;ul class=&quot;list block&quot;&gt;</code></li>
        </ul>
      </div>
      <!-- ############################################################################## -->
    </div>
    <!-- ################################################################################################ -->
    <div class="clear"></div>
  </div>
</div>
<!-- Footer -->
<div class="wrapper row2">
  <div id="footer" class="clear">
    <div class="one_quarter first">
      <h2 class="footer_title">Footer Navigation</h2>
      <nav class="footer_nav">
        <ul class="nospace">
          <li><a href="#">Home Page</a></li>
          <li><a href="#">Our Services</a></li>
          <li><a href="#">Meet the Team</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Online Shop</a></li>
        </ul>
      </nav>
    </div>
    <div class="one_quarter">
      <h2 class="footer_title">Latest Gallery</h2>
      <ul id="ft_gallery" class="nospace spacing clear">
        <li class="one_third first"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third first"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third first"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
        <li class="one_third"><a href="#"><img src="../images/demo/80x80.gif" alt=""></a></li>
      </ul>
    </div>
    <div class="one_quarter">
      <h2 class="footer_title">From Twitter</h2>
      <div class="tweet-container">
        <ul class="list none">
          <li><strong>@<a href="#">name</a></strong> <span class="tweet_text">RT <span class="at">@</span><a href="#">name</a> Donec suscipit vehicula turpis sed lutpat Quisque vitae quam neque.</span> <span class="tweet_time"><a href="#">about 9 hours ago</a></span></li>
          <li><strong>@<a href="#">name</a></strong> <span class="tweet_text">RT <span class="at">@</span><a href="#">name</a> Donec suscipit vehicula turpis sed lutpat Quisque vitae quam neque.</span> <span class="tweet_time"><a href="#">about 9 hours ago</a></span></li>
          <li><strong>@<a href="#">name</a></strong> <span class="tweet_text">RT <span class="at">@</span><a href="#">name</a> Donec suscipit vehicula turpis sed lutpat Quisque vitae quam neque.</span> <span class="tweet_time"><a href="#">about 9 hours ago</a></span></li>
          <li><strong>@<a href="#">name</a></strong> <span class="tweet_text">RT <span class="at">@</span><a href="#">name</a> Donec suscipit vehicula turpis sed lutpat Quisque vitae quam neque.</span> <span class="tweet_time"><a href="#">about 9 hours ago</a></span></li>
        </ul>
      </div>
    </div>
    <div class="one_quarter">
      <h2 class="footer_title">Contact Us</h2>
      <form class="rnd5" action="#" method="post">
        <div class="form-input clear">
          <label for="ft_author">Name <span class="required">*</span><br>
            <input type="text" name="ft_author" id="ft_author" value="" size="22">
          </label>
          <label for="ft_email">Email <span class="required">*</span><br>
            <input type="text" name="ft_email" id="ft_email" value="" size="22">
          </label>
        </div>
        <div class="form-message">
          <textarea name="ft_message" id="ft_message" cols="25" rows="10"></textarea>
        </div>
        <p>
          <input type="submit" value="Submit" class="button small orange">
          &nbsp;
          <input type="reset" value="Reset" class="button small grey">
        </p>
      </form>
    </div>
  </div>
</div>
<div class="wrapper row4">
  <div id="copyright" class="clear">
    <p class="fl_left">Copyright &copy; 2013 - All Rights Reserved - <a href="#">Domain Name</a></p>
    <p class="fl_right">Template by <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
  </div>
</div>
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script>window.jQuery || document.write('<script src="../layout/scripts/jquery-latest.min.js"><\/script>\
<script src="../layout/scripts/jquery-ui.min.js"><\/script>')</script>
<script>jQuery(document).ready(function($){ $('img').removeAttr('width height'); });</script>
<script src="../layout/scripts/jquery-mobilemenu.min.js"></script>
<script src="../layout/scripts/custom.js"></script>
</body>
</html>